<template>
    <div>
<h2>显示页面</h2>
<table class="table table-bordered">
     <tbody>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>性别</td>
            <td>电话</td>
            <td>城市</td>
            <td>地址</td>
        </tr>
        <tr v-for="item in data.list">
            <td>{{item.Id}}</td>
            <td>{{item.Name}}</td>
            <td>{{item.Sex}}</td>
            <td>{{item.Phone}}</td>
            <td>{{item.City}}</td>
            <td>{{item.Address}}</td>
        </tr>
     </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue'
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
const router=useRouter();

let data:any=reactive({
    list:[
  {
    Id: 1,
    Name: "李四",
    Sex: "男",
    Phone: "15295242157",
    City: "南京",
    Address: "天津"
  },
  {
    "Id": 2,
    "Name": "王五",
    "Sex": "女",
    "Phone": "15295242157",
    "City": "南京",
    "Address": "天津"
  },
  {
    "Id": 3,
    "Name": "李连",
    "Sex": "女",
    "Phone": "15295242157",
    "City": "南京",
    "Address": "天津"
  },
  {
    "Id": 4,
    "Name": "赵六",
    "Sex": "男",
    "Phone": "15295242157",
    "City": "南京",
    "Address": "天津"
  },
  {
    "Id": 5,
    "Name": "吴思",
    "Sex": "男",
    "Phone": "15295242157",
    "City": "南京",
    "Address": "天津"
  },
  {
    "Id": 6,
    "Name": "放松的",
    "Sex": "男",
    "Phone": "15295242157",
    "City": "南京",
    "Address": "天津"
  },
  {
    "Id": 7,
    "Name": "但是",
    "Sex": "男",
    "Phone": "15295242157",
    "City": "南京",
    "Address": "天津"
  },
  {
    "Id": 8,
    "Name": "史蒂芬",
    "Sex": "男",
    "Phone": "15295242157",
    "City": "南京",
    "Address": "天津"
  },

  {
    "Id": 9,
    "Name": "胜多负少",
    "Sex": "男",
    "Phone": "15295242157",
    "City": "南京",
    "Address": "天津"
  },
  {
    "Id": 10,
    "Name": "阿萨德",
    "Sex": "男",
    "Phone": "15295242157",
    "City": "南京",
    "Address": "天津"
  },
  {
    "Id": 11,
    "Name": "电热水",
    "Sex": "男",
    "Phone": "15295242157",
    "City": "南京",
    "Address": "天津"
  }
]
})

onMounted(()=>{
    show();
})
const show=()=>{
    axios({
        method:'get',
        url:'/api/User/ShowUser',
    })
    .then((res)=>{
        console.log(res);
    })
    .catch((err)=>{
        console.log(err);
    })
}


</script>

<style scoped>

</style>